<template>
    <div>
        <Card>
            <!--查询条件-->
            <Row>
                <Form>
                    <Row>
                        <Form :model="filters" ref="filters" label-position="right" :label-width="90" inline>
                            <FormItem label="小区">
                                <div class="filters-input">
                                    <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                        <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                                    </el-select>
                                </div>
                            </FormItem>
                        </Form>
                    </Row>
                    <!--功能按钮-->
                    <Row>
                        <Button type="primary" icon="md-add" @click="openAdd" style="margin-right: 10px;">新增</Button>
                    </Row>
                    <!--数据展示-->
                    <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                        <template slot="empty">暂无数据</template>
                        <el-table-column prop="routingName" label="表单名"></el-table-column>
                        <el-table-column prop="routingType" label="表单类型">
                            <template slot-scope="scope">
                                <p v-if="scope.row.routingType == 1" style="color:red">设备巡检表单</p>
                                <p v-if="scope.row.routingType == 2" style="color:green">设备报修表单</p>
                                <p v-if="scope.row.routingType == 3" style="color:blue">设备故障表单</p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deviceType" label="设备类型"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="info" @click="designForm(scope.row)">设计表单</el-button>
                                <el-button size="mini" type="primary" @click="openModify(scope.row)">修改</el-button>
                                <el-button size="mini" type="danger" @click="openDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                          show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                    </Page>
                    <!--新增-->
                    <Modal v-model="addVisible">
                        <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                            <FormItem label="小区">
                                <div>
                                    <el-select v-model="adds.housingId" filterable no-data-text="暂无数据">
                                        <el-option v-for="item in houseList" :value="item.id"
                                                   :key="item.id" :label="item.name"></el-option>
                                    </el-select>
                                </div>
                            </FormItem>
                            <FormItem label="表单名称">
                                <Input type="text" v-model="adds.routingName" placeholder="请输入表单名称" class="normal-input" clearable></Input>
                            </FormItem>
                            <FormItem label="表单类型">
                                <el-select v-model="adds.routingType" clearable placeholder="请选择">
                                    <el-option
                                        v-for="item in routingTypeList" :key="item.id"
                                        :value="item.id" :label="item.name">
                                    </el-option>
                                </el-select>
                            </FormItem>
                            <FormItem label="设备类型">
                                <el-select v-model="adds.deviceType" clearable placeholder="请选择">
                                    <el-option
                                        v-for="item in deviceTypeList" :key="item.id" :value="item.name" :label="item.name">
                                    </el-option>
                                </el-select>
                            </FormItem>
                        </Form>
                        <div slot="footer">
                            <Button type="text" size="large" @click="onCancel">取消</Button>
                            <Button type="primary" size="large" @click="skipAdd">确定</Button>
                        </div>
                    </Modal>
                    <!--修改-->
                    <Modal v-model="modifyVisible">
                        <Form :model="modifys" ref="adds" label-position="right" :label-width="90" inline>
                            <FormItem label="小区">
                                <div>
                                    <el-select v-model="modifys.housingId" disabled filterable no-data-text="暂无数据">
                                        <el-option v-for="item in houseList" :value="item.id"
                                                   :key="item.id" :label="item.name"></el-option>
                                    </el-select>
                                </div>
                            </FormItem>
                            <FormItem label="表单名称">
                                <Input type="text" v-model="modifys.routingName" placeholder="请输入表单名称" class="normal-input" clearable></Input>
                            </FormItem>
                        </Form>
                        <div slot="footer">
                            <Button type="text" size="large" @click="onCancel">取消</Button>
                            <Button type="primary" size="large" @click="saveModify">确定</Button>
                        </div>
                    </Modal>
                </Form>
            </Row>
        </Card>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                routingTypeList:[{
                    id:1,
                    name:"设备巡检表单",
                },{
                    id:2,
                    name:"设备报修表单",
                },{
                    id:3,
                    name:"设备故障表单",
                }],

                houseList:[],
                tableData:[],
                deviceTypeList:[],

                filters:{},
                adds:{
                    housingId:"",
                },
                modifys:{},

                tableLoading:false,
                addVisible:false,
                modifyVisible:false,
            }
        },

        created:function () {
            this.gethouse();
        },

        methods:{
            //获取小区
            gethouse: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.adds.housingId=res[0].id;
                    this.housechange();
                });
            },
            //加载数据
            loadData:function(){
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/routing/loadData",this.filters).then(res=>{
                    this.tableData=res.data.list;
                    this.pageTotal=res.data.total;
                    this.tableLoading=false;
                });
            },
            //查询小区选择
            housechange:function () {
                this.loadData();
            },
            //获取设备类型
            getDeviceType:function(){
                this.getRequest("/api/parameter/loadData?type=1").then(res=>{
                    this.deviceTypeList=res.data;
                });
            },
            //打开新增页面
            openAdd:function(){
                this.addVisible=true;
                this.getDeviceType();
            },
            //跳转新增编辑
            skipAdd(){
                this.$router.push({path: '/deviceManagement/form-maker', query:this.adds});
            },
            //设计表单
            designForm:function(row){
                this.$router.push({path: '/deviceManagement/form-maker', query:{id:row.id}});
            },
            //打开修改页面
            openModify:function(row){
                this.getRequest("/api/routing/openModify?id="+row.id).then(res=>{
                    if (res.code==20000){
                        this.modifys=res.data;
                        this.modifyVisible=true;
                    }
                });
            },
            //保存修改
            saveModify:function(){
                this.postRequest("/api/routing/saveRouting",this.modifys).then(res=>{
                    if (res.code==20000){
                        this.$Message.success("修改成功");
                        this.loadData();
                        this.modifyVisible=false;
                    }
                });
            },
            //弹出删除提示框
            openDelete:function(row){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/routing/removeRouting?id=" +row.id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {

                    }
                });
            },

            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            onCancel:function () {
                this.addVisible=false;
                this.modifyVisible=false;
            }
        }
    }
</script>
